<template>
    <el-container class="layout-container-demo" style="height: 100vh">
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu 
            default-active="0" 
            class="el-menu-vertical-demo" 
            @open="handleOpen" 
            @close="handleClose"
            :collapse="isCollapse" 
            router
          >
            <div v-for="(item, index) in filteredMenu" :key="index">
              <el-sub-menu 
                v-if="item.children?.length" 
                :index="index + ''"
              >
                <template #title>
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item 
                  v-for="(child, childIndex) in item.children" 
                  :key="childIndex"
                  :index="child.path"
                >
                  {{ child.name }}
                </el-menu-item>
              </el-sub-menu>
  
              <el-menu-item v-else :index="item.path">
                <template #title>{{ item.name }}</template>
              </el-menu-item>
            </div>
          </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown trigger="click">
            <el-avatar :size="36" style="cursor: pointer; margin-top: 12px"/>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
  
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { menuConfig } from '@/utils/menuConfig'
  import { logOff } from '@/api/user.js'
  
  const router = useRouter()
  const isCollapse = ref(false)
  const currentRole = ref(localStorage.getItem('role'))
  
  // 权限过滤逻辑
  const filteredMenu = computed(() => {
    return menuConfig
      .filter(item => {
        if (!item.roles?.includes(currentRole.value)) return false
        
        if (item.children) {
          item = {...item} // 避免修改原始数据
          item.children = item.children.filter(child => 
            child.roles?.includes(currentRole.value)
          )
          return item.children.length > 0
        }
        return true
      })
  })
  
  const handleOpen = (key, keyPath) => {
    console.log('菜单打开:', key, keyPath)
  }
  
  const handleClose = (key, keyPath) => {
    console.log('菜单关闭:', key, keyPath)
  }
  
  const handleLogout = async () => {
    try {
      const phone = localStorage.getItem('phone')
      phone && await logOff(phone)
    } catch (error) {
      ElMessage.error(error.message || '登出失败')
    } finally {
      localStorage.removeItem('token')
      localStorage.removeItem('phone')
      router.push('/login')
    }
  }
  </script>
  
  <style scoped>
  .layout-container-demo .el-header {
    position: relative;
    background: var(--el-color-primary-light-8);
    color: var(--el-text-color-primary);
  }
  
  .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background-color: var(--el-color-primary-light-7);
  }
  
  .layout-container-demo .el-menu {
    background-color: var(--el-color-primary-light-7);
    border-right: none;
  }
  
  .layout-container-demo .el-main {
    padding: 0;
  }
  
  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    transition: border-color var(--el-transition-duration), 
               background-color var(--el-transition-duration), 
               padding var(--el-transition-duration) !important;
  }
  
  .el-icon {
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
  }
  </style>